<script setup lang="ts">
import { onMounted, ref } from "vue";
import { GameManager } from "./gameManager";
import { InputManager } from "./inputManager";
import { HTMLActuator } from "./htmlActuator";
import { LocalStorageManager } from "./storageManager";

const scoreRef = ref();
const bestRef = ref();
const msgRef = ref();
const gridRef = ref();
const tileRef = ref();
let gameManager: any;

onMounted(() => {
  const inputManager = new InputManager(); //初始化输出操作事件管理器（键盘和触摸）
  const htmlActuator = new HTMLActuator(
    tileRef.value,
    scoreRef.value,
    bestRef.value,
    msgRef.value
  );
  const storage = new LocalStorageManager(); //初始化存储管理器,存分数和最好分数
  window.requestAnimationFrame(function () {
    gameManager = new GameManager(4, inputManager, htmlActuator, storage);
  });
});
</script>

<template>
  <div class="container">
    <div class="heading">
      <h1 class="title">2048</h1>
      <div class="scores-container">
        <div ref="scoreRef" class="score-container">0</div>
        <div ref="bestRef" class="best-container">0</div>
      </div>
    </div>

    <div class="above-game">
      <div class="game-intro">
        Join the numbers and get to the <strong>2048 tile!</strong>
      </div>
      <div
        class="restart-button"
        @click="
          () => {
            console.log('123', gameManager);
            gameManager?.restart();
          }
        "
      >
        New Game
      </div>
    </div>

    <div id="game-container" class="game-container">
      <div ref="msgRef" class="game-message">
        <!-- 提示信息 -->
        <p></p>
        <div class="lower">
          <a
            class="keep-playing-button"
            @click="() => gameManager?.continueGame()"
            >Keep going</a
          >
          <a class="retry-button" @click="() => gameManager?.restart()"
            >Try again</a
          >
        </div>
      </div>

      <div ref="gridRef" class="grid-container">
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
      </div>

      <div ref="tileRef" class="tile-container"></div>
    </div>
  </div>
</template>
<style lang="less" src="./2048.less"></style>
<style scoped lang="less">
</style>
